<template>
    <div>
        <pullrefesh @fetchData="fetchData" @refresh="refresh" @getScrollTop="getScrollTop" :scrollTop="scroll" :dataLoaded="dataLoaded" style="margin-top:51px" v-if="this.$store.state.staff.HandoutList">
            <div class="itemCont">
                <div v-for="item in this.$store.state.staff.HandoutList" :key="item.id">
                    <spacing></spacing>
                    <div>
                        <pending @nd="changeNavC(item.EVENT_ID)" :pending="item"></pending>
                    </div>
                </div>
            </div>
        </pullrefesh>
        <Row class="r-failed" type="flex" justify="center" v-if="!this.$store.state.staff.HandoutList && Cload === false">
            <Col span=9>
                <img src="static/staff/nodate.png" height="100" alt="">
                <p>无已处理建议</p>
            </Col>
        </Row>
        <Spin size="large" fix v-if="Cload"></Spin>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ndata: true,
            pendingsuccess: '',
            dataLoaded: false,
            scroll: '',
            Cload: false,
            Ntsta: false // 后台拿到数据与否时提示组件显示状态
        }
    },
    methods: {
        // 点击子组件查看详情触发建议
        ndatachange() {
            this.ndata = false
        },
        changeNavC(z) { // 点击子组件查看详情触发建议
            this.$emit('cN')
            this.$router.push({
                path: '/staffxiangqing',
                query: {
                    Sindex: z,
                    num: 1
                }
            })
        },
        /**
         * 设置情况反应（教职工）已处理
         * @staffState 处理状态
         */
        async SetEventflowList(page) {
            const State = this.$store.state
            let EventflowList = await this.$store.dispatch('getEventflowList', {
                userId: State.userInfo.USER_ID,
                type: 1,
                page: page
            })
            if (EventflowList.status === 0) {
                console.log(EventflowList)
                this.$store.commit('successdata_List', EventflowList.result)
            } else {
                this.dataLoaded = true
                this.Ntsta = true
            }
        },
        /**
         * 设置情况反应（教职工）刷新添加数据
         * @staffState 处理状态
         */
        async setEventflowList(page) {
            const State = this.$store.state
            let HandoutList = await this.$store.dispatch('getEventflowList', {
                userId: State.userInfo.USER_ID,
                type: 1,
                page: page
            })
            console.log(HandoutList)
            if (HandoutList.status === 0) {
                this.$store.commit('staff_Set_EventflowList', HandoutList.result)
                // this.pendingsuccess = HandoutList
            } else {
                this.dataLoaded = true
                this.Ntsta = true
            }
        },
        fetchData() { // 下拉只取到增加一的页面
            if (!this.dataLoaded) {
                let tempage = this.$store.state.staff.peddingcusesspage
                tempage++
                this.$store.commit('set_peddingcusesspage', tempage)
                this.setEventflowList(this.$store.state.staff.peddingcusesspage)
            }
        },
        async refresh() { // 上拉只取到第一页最新的数据
            this.Cload = true
            this.$store.commit('staff_Set_EventflowList', null)
            this.dataLoaded = false
            this.$store.commit('set_peddingcusesspage', 1)
            await this.setEventflowList(1)
            this.Cload = false
        },
        getScrollTop(scrollTop) { // 获取滚动条的高度、并传给详情页面、详情页面在传回来
            this.scroll = scrollTop
        }
    },
    components: {
        spacing: () => import('../../components/staff/spacing.vue'),
        pending: () => import('../../components/staff/pending.vue'), // 已处理子组件
        pullrefesh: () => import('../common/pullRefresh.vue')
    },
    created() {
        const Vm = this
        Vm.scroll = Vm.$store.state.staff.yichuliScroll
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        // 执行步骤
        async function Step() {
            Vm.SetEventflowList(1)
        }
        isUserInfo().then(() => {
            Step()
        })
    },
    destroyed() { // 点击详情后触发将滚动条数据存放
        console.log('切换')
        this.$store.commit('SET_yichuliScroll', this.scroll)
    }
}
</script>

<style>
.r-failed{
    text-align:center !important;
    padding-top:150px;
    color: #919191;
}
</style>

